<template>
	<div class="back">
		<!-- 导航按钮 -->
		<navs></navs>

		<!-- 排行榜 -->
		<div class="toplist">
			<div class="item" v-for="item in playList" :key="item.id">
				<!-- <div class="img"> -->
				<router-link tag="div" :to="'/recommend/playlistMoreSingle?id=' + item.id" class="img">
					<img :src="item.Image" alt="" />
					<!-- </div> -->
				</router-link>

				<ul>
					<li>
						1.{{ item.MName1 }}-{{ item.MSName1 }}
					</li>
					<li>
						2.{{ item.MName2 }}-{{ item.MSName2 }}
					</li>
					<li>
						3.{{ item.MName3 }}-{{ item.MSName3 }}
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		getToplist,
		getPlaylistDetail,
		getPlaylistDetaill
	} from "../api/ranking";
	import navs from "../components/base/navs.vue";
	export default {
		components: {
			navs
		},
		data() {
			return {
				playList:null,
				playList1:[],
			};
		},

		beforeRouteEnter(to, from, next) {
			getToplist({
				page:2,
				limit:23,
				Uid:-1,
				id:-1
			}).then((data) => {
				console.log(data.data);
				next((vm) => {
					vm.playList=data.data
				});
			});
		},
		methods: {
			// getToplistFun() {
			//   getToplist().then((data)=> {
			//     console.log(data);
			//     for (let i = 0; i < 35; i++) {
			//       let id = data.list[i].id;
			//       getPlaylistDetail({id:id}).then((data)=> {
			//         console.log(data);
			//         this.playList.push(data.playlist);
			//       })
			//     }
			//     console.log(this.playList);
			//   })

			// }

			// // 请求第二个接口
			// async getPlaylistDetailFun(list) {
			// 	for (let i = 0; i < list.length; i++) {
			// 		let id = list[i].id;
			// 		// console.log(id);
			// 		// 第二接口
			// 		await getPlaylistDetaill({
			// 			id: id
			// 		}).then((data) => {
			// 			this.playList.push(data.playlist);
			// 		});
			// 	}
			// },
		},
		created() {
			// this.getToplistFun();
			this.$emit("getnavs-btn");
			// this.$emit("get-style");
		},
	};
</script>

<style lang="less">
		
	.back{
		background-color: #0F172A;
	}
	.toplist {
		margin-top: 5px;
		padding-bottom: 100px;

		.item {
			margin: 10px;
			padding: 6px;
			// border-bottom: 1px solid #e1e2e2;
			
			background-color: #292D39;
			height: 90px;
			display: flex;
			border-radius: 10px;
			.img {
				flex: 0 0 90px;
				margin-right: 18px;
				// background-color: chocolate;
				width: 90px;
				height: 90px;
				border-radius: 2px;

				img {
					width: 90px;
					height: 90px;
					border-radius: 10px;
				}
			}

			ul {
				flex: 1;
				height: 90px;
				margin-top: 4px;

				li {
					height: 27px;
					line-height: 27px;
					font-size: 12px;
					color: #EEEEEE;
					// 1、固定宽度（高度可有可无）：width: 195px;
					// 2、把盒子转成弹性伸缩盒子：
					display: -webkit-box;
					// 3、弹性盒子排列方式：垂直排列：
					-webkit-box-orient: vertical;
					// 4、规定显示几行文本：
					-webkit-line-clamp: 1;
					// 5、溢出隐藏：
					overflow: hidden;
				}
			}
		}
	}
</style>
